<style lang="scss">
// .upload-demo {
//   width: 70px;
// }
</style>
<template>
  <el-dialog
    title="新增"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form @keyup.enter.native="dataFormSubmit()" label-width="120px">
    <el-form-item label="头图" required>
      <el-upload
        class=""
        :action="action"
        :on-preview="hotImgPreview"
        :data="{'module_type':'buyer_post'}"
        :on-remove="hotImgRemove"
        :file-list="hotImgList"
        :on-success="hotImgSuccess"
        :limit="1"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item label="商品大图" required>
      <el-upload
        class="upload-demo"
        :action="action"
        :on-preview="detailImgPreview"
        :data="{'module_type':'buyer_post'}"
        :on-remove="detailImgRemove"
        :file-list="detailImgList"
        :on-success="detailImgSuccess"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item label="买手发布" required>
       <el-select v-model="nickname" placeholder="请选择">
        <el-option
          v-for="item in buyersList"
          :key="item.uid"
          :value="item.nickname">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="标题" required>
      <el-input v-model="title" placeholder="标题"></el-input>
    </el-form-item>
    <el-form-item label="品牌" required>
       <el-select v-model="brandId" filterable placeholder="请选择">
        <el-option
          v-for="item in brandList"
          :key="item.id"
          :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="分类" required>
       <el-select v-model="categoryId" filterable placeholder="请选择">
        <el-option
           v-for="item in categoryList"
           :key="item.id"
           :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="热门">
      <el-select v-model="tagHotId" multiple filterable placeholder="请选择">
      <el-option
        v-for="item in tagHotList"
        :key="item.id"
        :value="item.id"
        :label="item.name">
      </el-option>
    </el-select>
    </el-form-item>
     <el-form-item label="风格">
      <el-select v-model="tagStyleId" multiple  filterable placeholder="请选择">
      <el-option
        v-for="item in tagStyleList"
        :key="item.id"
        :value="item.id"
        :label="item.name">
      </el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="性别" required>
      <!-- <el-input v-model="sex" placeholder="性别"></el-input> -->
      <el-select v-model="sex" filterable placeholder="请选择">
        <el-option
          v-for="item in sexList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="欧洲价格" required>
      <el-input style="width:200px" v-model="price" v-on:change="priceCheck" placeholder="欧洲价格"></el-input>
    </el-form-item>
    <el-form-item label="折扣" required>
      <el-input style="width:200px" v-model="discount" v-on:change="discountCheck" placeholder="请输入折扣"><template slot="append">%</template></el-input><font color="red">（请输入0-100之间的整数）</font>
    </el-form-item>
    <el-form-item label="预计收货时间" required>
      <!-- <el-input v-model="arrivalTime" placeholder="预计收货时间"></el-input> -->
      <el-select v-model="arrivalTime" filterable placeholder="请选择">
        <el-option
          v-for="item in arrivalTimeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="sku">
      <el-input v-model="sku" placeholder="sku"></el-input>
    </el-form-item>
    <el-form-item label="颜色">
      <el-input v-model="color" placeholder="颜色"></el-input>
    </el-form-item>
    <el-form-item label="尺寸">
      <el-input v-model="size" placeholder="尺寸"></el-input>
    </el-form-item>
    <el-form-item label="位置信息">
      <el-input v-model="location" placeholder="位置信息"></el-input>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="surePublishGoodsFlag" >确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      action: this.$http.adornUrl(
        `/biz/upload/upimgSingle?token=${this.$cookie.get("token")}`
      ),
      visible: false,
      title: "",
      buyersList: [],
      nickname: "",
      hotImgList: [],
      brandId: "",
      categoryId: "",
      tagHotId: "",
      tagStyleId: "",
      detailImgList: [],
      brandList: [],
      categoryList: [],
      tagHotList: [],
      tagStyleList: [],
      sex: "",
      price: "",
      arrivalTime: "",
      arrivalTimeList: [
        {
          value: "15",
          label: "15个工作日"
        },
        {
          value: "30",
          label: "30个工作日"
        },
        {
          value: "45",
          label: "45个工作日"
        },
        {
          value: "60",
          label: "60个工作日"
        }
      ],
      sku: "",
      color: "",
      size: "",
      location: "",
      sexList: [
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        },
        {
          value: "中性",
          label: "中性"
        }
      ],
      discount: "100",
      surePublishGoodsFlag: false
    };
  },
  mounted() {
    this.$http({
      url: this.$http.adornUrl(`/biz/common/getBrands`),
      method: "get",
      params: this.$http.adornParams()
    }).then(({ data }) => {
      this.brandList = data.data;
      this.brandId = data.data[0]["name"];
    });
    this.$http({
      url: this.$http.adornUrl(`/biz/common/getCategories`),
      method: "get",
      params: this.$http.adornParams()
    }).then(({ data }) => {
      this.categoryList = data.data;
      this.categoryId = data.data[0]["name"];
    });
    this.$http({
      url: this.$http.adornUrl(`/biz/common/getTagHosts`),
      method: "get",
      params: this.$http.adornParams()
    }).then(({ data }) => {
      this.tagHotList = data.data;
    });
    this.$http({
      url: this.$http.adornUrl(`/biz/common/getTagStyles`),
      method: "get",
      params: this.$http.adornParams()
    }).then(({ data }) => {
      this.tagStyleList = data.data;
    });
    this.$http({
      url: this.$http.adornUrl(`/biz/common/getBuyers`),
      method: "get",
      params: this.$http.adornParams()
    }).then(({ data }) => {
      this.buyersList = data.data;
      this.nickname = data.data[0]["nickname"];
    });
  },
  methods: {
    priceCheck() {
      var r = /^[0-9]*[1-9][0-9]*$/; //正整数
      var flag = r.test(this.price);
      if (!flag) {
        this.$message({
          message: "请输入正确的欧洲价格",
          type: "warning"
        });

        this.price = "";
      }
    },
    discountCheck() {
      var r = /^[0-9]*[1-9][0-9]*$/; //正整数
      var flag = r.test(this.discount);

      if (!flag || (this.discount < 0 || this.discount > 100)) {
        this.$message({
          message: "请输入0-100之间的整数",
          type: "warning"
        });
      }
    },
    imageWidthAndHight(url) {
      let img = new Image();
      img.src = url;
      img.onload = function() {
        resovle({
          width: img.width,
          height: img.height
        });
      };
      return img;
    },
    init() {
      this.visible = true;

      this.title = "";
      this.hotImgList = [];
      this.detailImgList = [];
      this.sex = "";
      this.price = "";
      this.arrivalTime = "";
      this.sku = "";
      this.color = "";
      this.size = "";
      this.location = "";
    },
    hotImgRemove(file, fileList) {
      this.hotImgList = fileList;
    },
    hotImgPreview(file) {
      console.log(file);
    },
    hotImgSuccess(response, file, fileList) {
      var obj = {};
      obj.url = response.url;
      this.hotImgList.push(obj);
    },

    detailImgRemove(file, fileList) {
      this.detailImgList = fileList;
    },
    detailImgPreview(file) {
      console.log(file);
    },
    detailImgSuccess(response, file, fileList) {
      var obj = {};
      obj.url = response.url;
      this.detailImgList.push(obj);
    },
    // 表单提交
    dataFormSubmit() {
      var titlePic;
      if (this.hotImgList.length == 0) {
        this.$message({
          message: "头图不能为空！",
          type: "warning"
        });
        return;
      }
      titlePic = this.hotImgList[0]["url"];

      var detailDesc;

      if (this.detailImgList.length == 0) {
        this.$message({
          message: "商品大图不能为空！",
          type: "warning"
        });
        return;
      }
      detailDesc = this.detailImgList.map(con => con.url);

      var uid;

      this.buyersList.map(con => {
        if (this.nickname == con.nickname) {
          uid = con.uid;
          return;
        }
      });

      if (!this.title) {
        this.$message({
          message: "标题不能为空！",
          type: "warning"
        });
        return;
      }

      var brandId;

      this.brandList.map(con => {
        if (this.brandId == con.name) {
          brandId = con.id;
          return;
        }
      });

      var categoryId;

      this.categoryList.map(con => {
        if (this.categoryId == con.name) {
          categoryId = con.id;
          return;
        }
      });
      if (!this.sex) {
        this.$message({
          message: "性别不能为空！",
          type: "warning"
        });
        return;
      }

      if (!this.price) {
        this.$message({
          message: "欧洲价格不能为空！",
          type: "warning"
        });
        return;
      }
      if (!this.arrivalTime) {
        this.$message({
          message: "预计收货时间不能为空！",
          type: "warning"
        });
        return;
      }
      // if (!this.sku) {
      //   this.$message({
      //     message: "sku不能为空！",
      //     type: "warning"
      //   });
      //   return;
      // }
      // if (!this.color) {
      //   this.$message({
      //     message: "颜色不能为空！",
      //     type: "warning"
      //   });
      //   return;
      // }
      // if (!this.size) {
      //   this.$message({
      //     message: "尺寸不能为空！",
      //     type: "warning"
      //   });
      //   return;
      // }

      this.surePublishGoodsFlag = true;
      this.$http({
        url: this.$http.adornUrl(`/biz/publishbuyers/save`),
        method: "post",
        data: this.$http.adornData({
          titlePic: titlePic,
          detailDesc: detailDesc,
          brandId: brandId,
          title: this.title,
          categoryId: categoryId,
          tagHotId: this.tagHotId,
          tagStyleId: this.tagStyleId,
          sex: this.sex,
          price: this.price,
          arrivalTime: this.arrivalTime,
          sku: this.sku,
          color: this.color,
          size: this.size,
          uid: uid,
          discount: this.discount / 100
        })
      }).then(({ data }) => {
        this.surePublishGoodsFlag = false;
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.visible = false;
              this.$emit("refreshDataList");
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
}
</script>
